<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>制定物料组成设计单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
</head>

<body>
    <div class="layuimini-container">
        <div class="layuimini-main">
            <!--搜索开始-->
            <fieldset class="layui-elem-field layuimini-search">
                <legend>搜索信息</legend>
                <div style="margin: 10px 10px 10px 10px">
                    <form class="layui-form layui-form-pane" action="" id="searchFrm">
                        <div class="layui-form-item">

                            <div class="layui-inline">
                                <label class="layui-form-label">产品名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="productName" id="productName" autocomplete="off"
                                        class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label" style="width: 150px;">开始时间</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="startTime" id="startTime" autocomplete="off"
                                        class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label" style="width: 150px;">结束时间</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="endTime" id="endTime" autocomplete="off"
                                        class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <a class="layui-btn " lay-submit="" lay-filter="data-search-btn"><label
                                        class="layui-icon layui-icon-search"></label>搜索</a>
                                <a class="layui-btn layui-btn-warm" onclick="javascript:$('#searchFrm')[0].reset()"
                                    lay-filter="data-search-btn"><label
                                        class="layui-icon layui-icon-refresh"></label>重置</a>
                            </div>
                        </div>
                    </form>
                </div>
            </fieldset>
            <!--搜索结束-->

            <!--表格开始-->
            <table class="layui-hide" id="productfileTable" lay-filter="productfileTable"></table>
            <div style="display: none;" type="text/html" id="productfileTableBar">
                <a class="layui-btn productfile_btn_show layui-btn-xs " lay-event="show">查看详情</a>
                <a class="layui-btn productfile_btn_update layui-btn-xs layui-btn-warm data-count-delete"
                    lay-event="add">设计物料组成</a>
            </div>

            <!--表格结束-->

            <!--详情的弹出层开始-->
            <div id="addOrUpdateDiv" style="display: none;padding: 20px;">
                <form method="post" class="layui-form layui-form-pane" lay-filter="dataFrm" id="dataFrm">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">产品名称：</label>
                            <div class="layui-input-inline">
                                <!-- 做修改 -->
                                <input type="hidden" name="id" />
                                <input type="text" name="productName" lay-verify="required" autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">制作商：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="factoryName" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">产品简介：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="productNick" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline" id="firstKind_Name">
                            <label class="layui-form-label" style="width: 150px;">一级分类</label>
                            <div class="layui-input-inline">
                                <input type="text" name="firstKindName" id="firstKindName" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline" id="secondKind_Name">
                            <label class="layui-form-label" style="width: 150px;">二级分类</label>
                            <div class="layui-input-inline">
                                <input type="text" name="secondKindName" id="secondKindName" class="layui-input">
                            </div>

                        </div>
                        <div class="layui-inline" id="thirdKind_Name">
                            <label class="layui-form-label" style="width: 150px;">三级分类</label>
                            <div class="layui-input-inline">
                                <input type="text" name="thirdKindName" id="thirdKindName" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">市场单价：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="listPrice" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">计划成本单价：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="costPrice" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">计量单位：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="personalUnit" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">计量值：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="personalValue" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">保修期：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="warranty" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">生命周期：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="lifecycle" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">用途类型：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="theType" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">档次级别：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="level" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">产品经理：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="responsiblePerson" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">替代品名称：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="twinName" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">替代品编号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="twinId" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">库存分配标志</label>
                            <div class="layui-input-inline">
                                <input type="text" name="designCellTag" autocomplete="off" class="layui-input" >
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">登记人</label>
                            <div class="layui-input-inline">
                                <input type="text" name="register" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">建档时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="registerTime" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">复核人</label>
                            <div class="layui-input-inline">
                                <input type="text" name="checker" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">复核时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="checkTime" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">审核标志</label>
                            <div class="layui-input-inline">
                                <input type="text" name="auditStatus" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">变更人</label>
                            <div class="layui-input-inline">
                                <input type="text" name="changer" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">变更时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="changerTime" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">档案变更标志</label>
                            <div class="layui-input-inline">
                                <input type="text" name="changeTag" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">价格变更标志</label>
                            <div class="layui-input-inline">
                                <input type="text" name="priceChangeTag" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">档案变更累计</label>
                            <div class="layui-input-inline">
                                <input type="text" name="fileChangeAmount" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">工序组成标志</label>
                            <div class="layui-input-inline">
                                <input type="text" name="designProcedureTag" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">物料组成标志</label>
                            <div class="layui-input-inline">
                                <input type="text" name="designModuleTag" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 150px;">产品描述：</label>
                        <div class="layui-input-inline" style="width: 930px;">
                            <input type="texteare" name="productDescribe" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">

                        <label class="layui-form-label" style="width: 150px;">供应商集合：</label>
                        <div class="layui-input-inline" style="width: 930px;">
                            <input type="text" name="providerGroup" autocomplete="off" class="layui-input">
                        </div>

                    </div>
            </div>
        </div>
        </form>
    </div>
    <!--详情的弹出层结束-->

    <!--设计物料组成开始-->
    <div id="addDiv" style="display: none;padding: 20px;">
        <form method="post" class="layui-form layui-form-pane" lay-filter="MaterialdataFrm" id="MaterialdataFrm">
            <table class="layui-table" id="productAddTable" lay-filter="productAddTable"></table>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 150px;">设计要求：</label>
                <div class="layui-input-inline" width="200px">
                    <input type="text" name="moduleDescribe" id="moduleDescribe" value="暂无" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 150px;">当前选中总计：</label>
                <div class="layui-input-inline" width="200px">
                    <input type="text" name="costPriceSum" value="" autocomplete="off" class="layui-input" readonly />
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 150px;">产品名：</label>
                <div class="layui-input-inline" width="200px">
                    <input type="text" name="productName" autocomplete="off" class="layui-input" readonly="readonly">
                </div>
            </div>
        </form>
    </div>

    <!--设计物料组成结束-->
    <script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script src="../../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script src="../../../lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
    <script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
    <script src="../../../lib/common/common.js" charset="utf-8"></script>

    <script>
        layui.use(['form', 'table', 'laydate', 'layer'], function () {
            var form = layui.form;
            var table = layui.table;
            var laydate = layui.laydate;
            var layer = layui.layer;


            laydate.render({
                elem: '#startTime',
                type: "datetime"
            });
            laydate.render({
                elem: '#endTime',
                type: "datetime"
            });

            //加载查询条件里面的审核下拉列表
            $.get(api5 + "dropdownbox/queryAllCheckTag", function (res) {
                var search_checkTag = $(".checkTagSel");
                var html = "<option value =''>请选择</option>";
                var data = res.data;
                $.each(data, function (index, item) {
                    html += "<option value =" + item.keyNumber + ">" + item.textDescribe +
                        "</option>";
                });
                search_checkTag.html(html);
                form.render("select");
            });

            //加载商品用途下拉列表
            $.get(api5 + "dropdownbox/queryAllType", function (res) {
                var search_type = $(".typeSel");
                var html = "<option value =''>请选择商品用途</option>";
                var data = res.data;
                $.each(data, function (index, item) {
                    html += "<option value =" + item.keyNumber + ">" + item.textDescribe +
                        "</option>"
                });
                search_type.html(html);
                form.render("select");
            });

            //加载档次下拉列表
            $.get(api5 + "dropdownbox/queryAllLevel", function (res) {
                var search_productClass = $(".productClassSel");
                var html = "<option value =''>请选择档次级别</option>";
                var data = res.data;
                $.each(data, function (index, item) {
                    html += "<option value =" + item.keyNumber + ">" + item.textDescribe +
                        "</option>"
                });
                search_productClass.html(html);
                form.render("select");
            });

            var tableIns = table.render({
                elem: '#productfileTable',
                url: api5 + 'productfile/queryAllProductFileByGoods',
                toolbar: "#productfileToolBar",
                height: 'full-165',
                cols: [
                    [{
                        field: 'productId',
                        title: '编号',
                        align: "center",
                    },
                    {
                        field: 'productName',
                        title: '产品名称',
                        align: "center",
                    },
                    {
                        field: 'level',
                        title: '档次级别',
                        align: "center",
                    },
                    {
                        field: 'register',
                        title: '创建人',
                        align: "center",
                    },
                    {
                        field: 'registerTime',
                        title: '添加时间',
                        align: "center",
                    },
                    {
                        field: 'checkTime',
                        title: '产品审核通过时间',
                        align: "center",
                    },
                    {
                        title: '操作',
                        templet: '#productfileTableBar',
                        fixed: "right",
                        align: "center",
                    }
                    ]
                ],
                page: true
            });

            // 监听搜索操作
            form.on('submit(data-search-btn)', function (data) {
                var params = $("#searchFrm").serialize();
                //执行搜索重载
                table.reload('productfileTable', {
                    page: {
                        curr: 1
                    },
                    url: api5 + 'productfile/queryAllProductFileByGoods?' + params
                });
                return false;
            });

            //监听行数据的事件
            table.on('tool(productfileTable)', function (obj) {
                var data = obj.data;
                if (obj.event === 'add') {
                    addproductFile(data);
                } else if (obj.event === 'show') {
                    showproductfile(data);
                }
            });

            //详情窗口
            function showproductfile(data) {
                mainIndex = layer.open({
                    type: 1,
                    title: '查看[' + data.productName + ']产品档案',
                    content: $("#addOrUpdateDiv"),
                    area: ['1150px', '780px'],
                    success: function (index) {
                        //装载数据表格
                        console.log(data);
                        form.val("dataFrm", data);
                    }
                });
            }
				
            let dataVal;
            var num = 0;

            var listData = []

            table.on('edit(productAddTable)', function (obj) {
                var value = obj.value //得到修改后的值
                    ,
                    data = obj.data //得到所在行所有键值
                    ,
                    field = obj.field; //得到字段
                console.log(obj.tr[0].childNodes[6].childNodes[0].innerHTML = (obj.data.amount * obj
                    .data.costPrice));
                console.log(obj.tr[0].childNodes[6].childNodes[0].innerHTML);
            });

            //产品物料设计
            function addproductFile(data) {
                var EdittableIns;
                mainIndex = layer.open({
                    type: 1,
                    title: '产品物料设计',
                    content: $("#addDiv"),
                    area: ['1150px', '580px'],
                    btn: ['<span class="layui-icon layui-icon-ok">保存</span>'],
                    yes: function (indexs, layero) {
                        layer.load(0, {
                            time: 1500
                        });
                        var checkStatus = table.checkStatus('productAddTable');
                        var checkData = checkStatus.data;
                        var allTotal = 0;
                        let costPriceSum = 0;
                        if (checkData != null && checkData != "" && checkData != 0) {
                            $.each(checkData, function (index, item) {
                                item.subtotal = (item.amount * item.costPrice);
                                allTotal += item.subtotal;
                            });
                            data.moduleDescribe = $("#moduleDescribe").val();
                            checkData.push(data);
                            data.alltotal = allTotal;
                            // layer.alert(JSON.stringify(checkData));
                            console.log(data);
                            console.log(checkData);
                            console.log(data.alltotal)

                            /*$.post(api5 + 'productfile/addProductFileAll', JSON.stringify(checkData), function (res) {
                                 console.log(res);
                             })*/
                            $.ajax({
                                url: api5 + "productfile/addProductFileAll",
                                type: 'POST',
                                data: JSON.stringify(checkData),
                                dataType: 'json',
                                contentType: 'application/json;charset=utf-8',
                                success: function (res) {
                                    console.log(res.msg)
                                },
                                error: function (ret) {
                                    console.log(ret.status);
                                }
                            });
								layer.close(mainIndex);
                        } else {
                            layer.msg("请选择并填写");
                        }
                    },
                    success: function (index) {
                        form.val("MaterialdataFrm", {
                            productName: data.productName,
                            costPriceSum: null,
                        });
                        console.log(data)
                        //类型物料表
                        EdittableIns = table.render({
                            elem: '#productAddTable',
                            url: api5 + 'productfile/queryAllProductFileByMaterialByClass?kindName=' + data.firstKindName,
                            // toolbar: "#productfileToolBar",
                            cellMinWidth: 150,
                            // height: 'full-1',
                            cols: [
                                [{
                                    type: "checkbox",
                                    fixed: "left"
                                },
                                {
                                    field: 'productId',
                                    title: '编号',
                                    align: "center",
                                    width: 180
                                },
                                {
                                    field: 'productName',
                                    title: '产品名称',
                                    align: "center",
                                    width: 110
                                },
                                {
                                    field: 'listPrice',
                                    title: '市场单价',
                                    align: "center",
                                    width: 110
                                },
                                {
                                    field: 'costPrice',
                                    title: '成本单价',
                                    align: "center",
                                    width: 110
                                },
                                {
                                    field: 'amount',
                                    title: '数量',
                                    align: "center",
                                    edit: 'amount',
                                    width: 180
                                },
                                {
                                    field: 'subtotal',
                                    title: '小计',
                                    align: "center",
                                    width: 180
                                },
                                {
                                    field: 'describe',
                                    title: '描述',
                                    align: "center",
                                    edit: 'describe',
                                    width: 183
                                }
                                ]
                            ],
                            done: function (res, curr, count) {
                                dataVal = res;
                                dataVal.subtotal = dataVal.amount * dataVal.costPrice;
                            },

                        });
                    }
                });
            }

            //待修改
            table.on('checkbox(productAddTable)', function (obj) {
                var allTotal = obj.data.amount * obj.data.costPrice;
                if (obj.type == "one") {
                    if (obj.data.amount != 0 && obj.data.amount != "" && obj.data.amount != null) {
                        if (obj.checked == true) {
                            num += allTotal;
                            listData.push(obj.data);
                            form.val("MaterialdataFrm", {
                                costPriceSum: num
                            });
                        } else {
                            let i = listData.indexOf(obj.data);
                            if (i != -1) {
                                listData.splice(i, 1);
                            }
                            num -= allTotal;
                            form.val("MaterialdataFrm", {
                                costPriceSum: num
                            });
                        }
                    } else {
                        layer.msg("数量至少不能少于1");
                        // $(this).prop('checked', false);
                        // layui.form.render();
                    }
                } else if (obj.type == "all") {
                    var all = 0;
                    if (obj.data.amount != 0 && obj.data.amount != "" && obj.data.amount != null) {
                        if (obj.checked == true) {
                            $.each(dataVal.data, function (index, item) {
                                all += item[index].amount * item[index].costPrice
                                listData.push(item);
                                all += parseInt(item.amount) * parseInt(item.costPrice);
                                console.log("all")
                            });
                            form.val("MaterialdataFrm", {
                                costPriceSum: all
                            });
                        } else {
                            listData = [];
                            form.val("MaterialdataFrm", {
                                costPriceSum: 0
                            });

                        }

                    }
                }
            });

            //提交数据
            form.on("submit(doSubmit)", function (data) {
                var btn = $(this);
                btn.text("提 交 中...").attr("disabled", "disabled").addClass("layui-disabled");
                var params = $("#dataFrm").serialize();
                console.log(params);
                alert(params)
                $.post(url, params, function (res) {
                    layer.msg(res.msg);
                    if (res.code == 200) {
                        btn.text("提交").attr("disabled", "").removeClass("layui-disabled");
                        tableIns.reload();
                    }
                    layer.close(mainIndex);
                })
                return false;
            })
        });
    </script>
</body>

</html>